<template>
  <div id="login-container" class="w-screen h-screen bg-[#353535]">
    <div class="w-600 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-200">
      <el-form ref="formRef" class="w-full" :model="formData" label-width="0px" size="large">
        <el-row>
          <el-col>
            <el-form-item prop="account" :rules="[VMap.Required()]">
              <xt-input v-model="formData.account" placeholder="请输入账号" />
            </el-form-item>
          </el-col>

          <el-col>
            <el-form-item prop="password" :rules="[VMap.Required()]">
              <xt-input
                v-model="formData.password"
                type="password"
                show-password
                placeholder="请输入密码"
              />
            </el-form-item>
          </el-col>

          <el-col>
            <xt-button class="w-full" type="primary" @click="handleSubmit">登 录</xt-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "LoginLayout",
};
</script>

<script lang="ts" setup>
import { ref, getCurrentInstance } from "vue";
import VMap from "@/secondary/validate";

import useUserStore from "@/pinia/user";

const curIns = getCurrentInstance()?.proxy;
const userStore = useUserStore();

interface FormDataType {
  account: string;
  password: string;
}
const formData = ref<FormDataType>({
  account: "",
  password: "",
});

const formRef = ref();
const handleSubmit = async () => {
  await formRef.value.validate();
  await userStore.getUserInfo();

  curIns?.$router.replace({
    path: "/dashboard",
  });
};
</script>
